<template>
	<view class="page-container">
		<view class="page-content-item">
			<view class="page-content-title">
				{{target.name}}
			</view>
		</view>
		<view class="page-content-item">
			<view class="page-content-title">
				优点
			</view>
			<view class="page-content-detail">
				<p v-for="(item, index) in target.advantages">{{index + 1}}. {{item}}</p>
			</view>
		</view>
		<view class="page-content-item">
			<view class="page-content-title">
				缺点
			</view>
			<view class="page-content-detail">
				<p v-for="(item, index) in target.disadvantages">{{index + 1}}. {{item}}</p>
			</view>
		</view>
		<view class="page-content-item">
			<view class="page-content-title">
				参考房源
			</view>
			<view class="page-content-detail">
				<view class="page-content-like-item" v-for="(item, index) in target.likeList">
					<p>面积：{{item.area}};预计总价：{{item.total}}</p>
					<img class="page-content-img" :src="'/static/' + target.name + item.area + '.jpg'" mode="aspectFit"></img>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import data from '../../static/data';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	
	let target = reactive({})
	
	onLoad((options)=>{
		const targetKey = options.target
		const targetData = data.plotsList.find((item, index)=>{
			return index == targetKey
		})
		Object.keys(targetData).forEach(key=>{
			target[key] = targetData[key]
		})
		console.log(target)
	})
</script>

<style lang="less" scoped>
	.page-container{
		.page-content-item{
			padding: 10px 0 0 40px;
			.page-content-title{
				height: 40px;
				line-height: 40px;
				font-size: 28px;
				font-weight: bold;
				color: #333333;
			}
			.page-content-detail{
				padding-left: 28px;
				.page-content-like-item{
					padding: 10px 0 30px;
					.page-content-img{
						height: 600px;
						// width: 300px;
					}
				}
			}
		}
	}
</style>